<script setup>
import { computed, reactive, ref, nextTick, watch } from "vue";
import { useBuildAllList, useActivityStatus } from "../../../hooks/lq_index";
import { ElMessage } from "element-plus";
import {
  addActivityApi,
  editActivityApi,
  getActivityInfoApi,
} from "../../../api/activity";
// import ImageUpload from   '../../../components/ImageUpload'
// ==================
const buildList = useBuildAllList();
const statusList = useActivityStatus();
//子父通信============
const emit = defineEmits(["updateList"]);
// ======= 表单数据 ========= 为了方便重置时取值 做展开操作
const defaultState = {
  community_code: "",
  title: "",
  place: "",
  sponsor_unit: "",
  begin_time: "",
  end_time: "",
  status: null,
  photo: "",
  content: "",
  id: null,
};
const formData = reactive({ ...defaultState });
// 校验规则
const formRules = {
  community_code: [{ required: true, message: "请选择", trigger: "change" }],
  title: [{ required: true, message: "请输入", trigger: "blur" }],
  place: [{ required: true, message: "请输入", trigger: "blur" }],
  sponsor_unit: [{ required: true, message: "请输入", trigger: "blur" }],
  begin_time: [{ required: true, message: "请输入", trigger: "change" }],
  end_time: [{ required: true, message: "请输入", trigger: "change" }],
};
// 表单ref引用
const formRef = ref();
// 弹框控制变量
const isShow = ref(false);

// =================时间戳处理功能======================
const startTime = ref("");
const endTime = ref("");

const startChange = (val) => {
  console.log(val);
  if (val) {
    formData.begin_time = +new Date(val);
  } else {
    formData.begin_time = null;
  }
};

const endChange = (val) => {
  console.log(val);
  if (val) {
    formData.end_time = +new Date(val);
  } else {
    formData.end_time = null;
  }
};

// 表单提交
const onSubmit = async () => {
  try {
    // 表单校验
    await formRef.value.validate();
    // 整理数据
    // 发送请求
    formData.id
      ? await editActivityApi(toRaw(formData))
      : await addActivityApi(toRaw(formData));
    // 消息提示
    ElMessage.success("操作成功");
    // 关闭抽屉
    isShow.value = false;
    // 列表更新
    emit("updateList");
  } catch (error) {
    console.log(error);
  }
};
// 关闭事件
const closeHandler = async () => {
  await nextTick();
  formRef.value?.resetFields();
  Object.assign(formData, { ...defaultState });
  formData.id = null;
  startTime.value = "";
  endTime.value = "";
  quillRef.value.setHTML("");
};

// 回显操作
const replyData = async (id) => {
  // console.log('11111');
  let res = await getActivityInfoApi(id);
  console.log(res);
  startTime.value = res.data.begin_time;
  endTime.value = res.data.end_time;
  Object.assign(formData, res.data);
  isShow.value = true;
};

// 监听富文本回显
const quillRef = ref();

watch(
  () => formData.content,
  async (newVal) => {
    // console.log(newVal);
    if (formData.id) {
      await nextTick();
      quillRef.value.setHTML(newVal);
    }
  }
);

// 标题优化
const title = computed(() => {
  return formData.id ? "修改" : "添加";
});
// ===============VUE3 中组件是封闭的 需要抛出去
defineExpose({
  isShow,
  replyData,
});
</script>

<template>
  <el-drawer
    size="35%"
    @close="closeHandler"
    :destroy-on-close="true"
    v-model="isShow"
    :title="title"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      label-width="80px"
      label-position="top"
      :inline="true"
      size="default"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="community_code" label="所属小区">
            <el-select
              clearable
              v-model="formData.community_code"
              placeholder="请选择"
            >
              <el-option
                v-for="item in buildList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="title" label="活动主题">
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="place" label="活动地点">
            <el-input v-model="formData.place"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="sponsor_unit" label="举办单位">
            <el-input v-model="formData.sponsor_unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="begin_time" label="活动开始时间">
            <el-date-picker
              @change="startChange"
              v-model="startTime"
              type="datetime"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="end_time" label="活动结束时间">
            <el-date-picker
              @change="endChange"
              v-model="endTime"
              type="datetime"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="status" label="活动状态">
            <el-radio-group v-model="formData.status" class="ml-4">
              <el-radio
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.value"
                size="default"
                >{{ item.label }}</el-radio
              >
              <!-- <el-radio label="2" size="default">无效</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="photo" label="图片">
            <ImageUpload
              :limit="1"
              v-model="formData.photo"
              :type="'adv'"
            ></ImageUpload>
          </el-form-item>
        </el-col>
        <el-form-item prop="content" label="活动内容">
          <QuillEditor
            v-model:content="formData.content"
            contentType="html"
            ref="quillRef"
          />
          <!-- <el-input v-model="formData.content" type="textarea"></el-input> -->
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" size="default" @click="onSubmit"
          >确定</el-button
        >
      </div>
    </template>
  </el-drawer>
  =======
  <el-drawer
    size="35%"
    @close="closeHandler"
    :destroy-on-close="true"
    v-model="isShow"
    :title="title"
  >
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      label-width="80px"
      label-position="top"
      :inline="true"
      size="default"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="community_code" label="所属小区">
            <el-select
              clearable
              v-model="formData.community_code"
              placeholder="请选择"
            >
              <el-option
                v-for="item in buildList"
                :key="item.id"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="title" label="活动主题">
            <el-input v-model="formData.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="place" label="活动地点">
            <el-input v-model="formData.place"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="sponsor_unit" label="举办单位">
            <el-input v-model="formData.sponsor_unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="begin_time" label="活动开始时间">
            <el-date-picker
              @change="startChange"
              v-model="startTime"
              type="datetime"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="end_time" label="活动结束时间">
            <el-date-picker
              @change="endChange"
              v-model="endTime"
              type="datetime"
              placeholder="请输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="status" label="活动状态">
            <el-radio-group v-model="formData.status" class="ml-4">
              <el-radio
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.value"
                size="default"
                >{{ item.label }}</el-radio
              >
              <!-- <el-radio label="2" size="default">无效</el-radio> -->
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="photo" label="图片">
            <ImageUpload
              :limit="1"
              v-model="formData.photo"
              :type="'adv'"
            ></ImageUpload>
          </el-form-item>
        </el-col>
        <el-form-item prop="content" label="活动内容">
          <QuillEditor
            v-model:content="formData.content"
            contentType="html"
            ref="quillRef"
          />
          <!-- <el-input v-model="formData.content" type="textarea"></el-input> -->
        </el-form-item>
      </el-row>
    </el-form>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" size="default" @click="onSubmit"
          >确定</el-button
        >
      </div>
    </template>
  </el-drawer>
  >>>>>>> origin/qiang
</template>

<style scoped>
:deep(.ql-toolbar) {
  width: 500px;
}

:deep(.ql-container) {
  height: 200px;
  width: 500px;
}
</style>
